<template>
  <div class="dashboard-container">
    <!-- 统计卡片区 -->
    <el-row :gutter="16" class="overview-cards">
      <el-col :span="6" v-for="item in overviewData" :key="item.title">
        <el-card shadow="hover" class="overview-card">
          <div class="overview-title">{{ item.title }}</div>
          <div class="overview-value">{{ item.value }}</div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="16" class="main-charts-row">
      <!-- 左侧折线图 -->
      <el-col :span="16">
        <el-card shadow="always" class="chart-card">
          <div class="chart-title">报表创建趋势</div>
          <v-chart :option="lineChartOption" autoresize style="height:300px;" />
        </el-card>
      </el-col>
      <!-- 右侧饼图 -->
      <el-col :span="8">
        <el-card shadow="always" class="chart-card">
          <div class="chart-title">报表类型分布</div>
          <v-chart :option="pieChartOption" autoresize style="height:300px;" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="16" class="quick-row">
      <!-- 快捷入口 -->
      <el-col :span="8">
        <el-card shadow="hover" class="quick-entry-card">
          <div class="quick-title">快捷入口</div>
          <el-button type="primary" size="large" @click="goTo('dataset')">新建数据集</el-button>
          <el-button type="success" size="large" @click="goTo('report')">新建报表</el-button>
          <el-button type="warning" size="large" @click="goTo('screen')">新建大屏</el-button>
        </el-card>
      </el-col>
      <!-- 最近操作 -->
      <el-col :span="8">
        <el-card shadow="hover" class="recent-card">
          <div class="recent-title">最近操作</div>
          <el-table :data="recentActions" border size="small" height="180" style="width:100%;">
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="type" label="类型" width="70" />
            <el-table-column prop="date" label="时间" width="110" />
          </el-table>
        </el-card>
      </el-col>
      <!-- 公告 -->
      <el-col :span="8">
        <el-card shadow="hover" class="notice-card">
          <div class="notice-title">系统公告</div>
          <el-alert type="info" :closable="false" show-icon>
            <template #title>
              <span>欢迎使用数据处理分析与监控管理系统！如需帮助，请查阅操作手册或联系管理员。</span>
            </template>
          </el-alert>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import VChart from 'vue-echarts'
import { useRouter } from 'vue-router'

const router = useRouter()

// 统计卡片数据
const overviewData = [
  { title: '数据集数量', value: 12 },
  { title: '报表数量', value: 22 },
  { title: '大屏数量', value: 5 },
  { title: '今日导入量', value: 4 }
]

// 折线图数据
const lineChartOption = ref({
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['07-01', '07-02', '07-03', '07-04', '07-05', '07-06', '07-07']
  },
  yAxis: { type: 'value' },
  series: [
    {
      name: '报表数',
      type: 'line',
      data: [2, 3, 4, 2, 6, 8, 7],
      smooth: true
    }
  ]
})

// 饼图数据
const pieChartOption = ref({
  tooltip: { trigger: 'item' },
  legend: { top: 'bottom' },
  series: [
    {
      name: '类型分布',
      type: 'pie',
      radius: ['35%', '70%'],
      avoidLabelOverlap: false,
      label: { show: false, position: 'center' },
      emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
      data: [
        { value: 10, name: '表格' },
        { value: 7, name: '柱状图' },
        { value: 5, name: '折线图' },
        { value: 3, name: '饼图' }
      ]
    }
  ]
})

// 最近操作数据
const recentActions = ref([
  { name: '销售数据集', type: '数据集', date: '07-07' },
  { name: '月报分析', type: '报表', date: '07-07' },
  { name: '生产大屏', type: '大屏', date: '07-06' },
  { name: '市场分析', type: '报表', date: '07-05' }
])

// 快捷入口跳转（根据你的路由实际配置修改）
function goTo(type) {
  if (type === 'dataset') {
    // 跳转到数据集管理页
    router.push('/dataset/dataset-list')
  } else if (type === 'report') {
    router.push('/report/multi-dim-report') 
  } else if (type === 'screen') {
    router.push('/screen/screen-list') 
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 24px;
}
.overview-cards {
  margin-bottom: 16px;
}
.overview-card {
  text-align: center;
  padding: 22px 0;
}
.overview-title {
  font-size: 16px;
  color: #555;
}
.overview-value {
  font-size: 32px;
  color: #1e80ff;
  margin-top: 12px;
  font-weight: bold;
}
.main-charts-row {
  margin-bottom: 16px;
}
.chart-card {
  padding-bottom: 0;
}
.chart-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}
.quick-row .el-card {
  margin-bottom: 0;
  min-height: 230px;
}
.quick-title,
.recent-title,
.notice-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
}
.quick-entry-card .el-button {
  margin-right: 10px;
  margin-bottom: 8px;
}
</style>
